<template>
    <el-dialog :model-value="props.visible" center title="半成品生产单详情" @close="handleClose">
        <div ref="printArea" id="print-area">
            <table class="order-table">
                <caption>
                    <h2>半成品工单</h2>
                </caption>
                <tr>
                    <td colspan="6" class="img-col">
                        <img class="product-image" :src="props.orderDetail?.imageUrl" alt="">
                    </td>
                </tr>
                <tr>
                    <td colspan="1">备注</td>
                    <td colspan="5">{{ props.orderDetail?.remark }}</td>
                </tr>
                <tr>
                    <td colspan="1">客户名称</td>
                    <td colspan="2">{{ props.orderDetail?.remark }}</td>
                    <td colspan="1">制单日期</td>
                    <td colspan="2">{{ props.orderDetail?.createTime }}</td>
                </tr>
                <tr>
                    <td colspan="1">半成品名称</td>
                    <td colspan="2">{{ props.orderDetail?.specsDetail }}</td>
                    <td colspan="1">交付日期</td>
                    <td colspan="2">{{ props.orderDetail?.deliveryDate }}</td>
                </tr>
                <tr>
                    <td>生产单号</td>
                    <td colspan="5" class="img-col">
                        <img class="code-image" :src="props.orderDetail?.codeUrl" alt="">
                        <div class="order-number">{{ props.orderDetail?.semiProductionCode }}</div>
                    </td>
                </tr>
                <tr>
                    <td>生产工序</td>
                    <td colspan="5" class="step-col">
                        <el-steps :active="0">
                            <el-step title="印刷"></el-step>
                            <el-step title="覆膜"></el-step>
                            <el-step title="烫金"></el-step>
                        </el-steps>
                    </td>
                </tr>
                <tr>
                    <td>纸张信息</td>
                    <td>{{ props.orderDetail?.paperInfo }}</td>
                    <td>生产数量</td>
                    <td>{{ props.orderDetail?.produceNumber }}</td>
                    <td>纸张数量</td>
                    <td>{{ props.orderDetail?.paperUseNumber || 0 }}</td>
                </tr>
                <tr>
                    <td>刀版信息</td>
                    <td>{{ props.orderDetail?.knifePlateName }}</td>
                    <td>能切套数</td>
                    <td>{{ props.orderDetail?.numberOfSets }}</td>
                    <td>源文件</td>
                    <td>无</td>
                </tr>
            </table>
        </div>
        <template #footer>         
            <el-button type="primary" size="large" @click="onClickPrint" >打印</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">

const props = defineProps<{
    visible: boolean,
    orderDetail: any
}>();
const emits = defineEmits(['close']);
const printArea = ref<HTMLElement | null>(null);

const onClickPrint = async () => {
    if(printArea.value){
        // 保存当前页面的原始内容
        const originalContent = document.body.innerHTML
        // 获取要打印的内容
        const printContent = printArea.value.innerHTML

        // 替换页面内容为要打印的内容
        document.body.innerHTML = printContent

        // 调用打印
        window.print()

        // 打印后恢复原始内容
        document.body.innerHTML = originalContent
        location.reload() // 可选：刷新页面以恢复事件监听
    };
};

const handleClose = () => {
    emits('close')
};
</script>

<style lang="scss" scoped>
#print-area{
    display: flex;
    justify-content: center;
    flex-flow:wrap
}
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 90%;
    font-size: 20px;
    tr{
        border: 1px solid black;
    }
    td:not(.step-col){
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        .product-image{
            height: 300px;
            
        }
        .order-numbe{
            color: blue
        }
        .code-image{
            height: 100px
        }
    }
    .step-col{
        border: 1px solid black;
        padding: 10px 10px 0 10px;
    }
}
</style>